<template>
  <div class="frank_warnning" v-show="isShowWarnning">
    <div class="warnning_header">
      <span><b style="font-size: 17px">消息列表</b></span>
      <el-icon style="float: right;margin: 5px;" @click="handleCloseWarnning">
        <close />
      </el-icon>
    </div>
    <div class="warnning_body">
      <el-scrollbar height="100%">
        <ul>
          <li v-for="(item, index) in msgRes" :key="index">
            <el-descriptions :title="item.type == 1 ? '药品耗材' : '状态更新'">
              <el-descriptions-item label="">
                <div>时间：{{ item.receiveTime }}</div>
                <span class="msg_span" :class="item.type == 2 ? 'textColor' : ''">{{ item.content }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from "vue";
import VueEvent from "utils/event.js";
export default {
  name: "",
  components: {},
  props: [],
  setup() {
    const state = reactive({
      ambulanceCode: ref("001"),
      patientCode: ref("123"),
      isShowWarnning: ref(false),
      msgRes: ref([])
    });
    const handleCloseWarnning = () => {
      state.isShowWarnning = false;
    };
    onBeforeMount(() => {
    });
    onMounted(() => {
      VueEvent.on("handleWarnning", (data) => {
        // console.log(data);
        state.isShowWarnning = data.isShowWarnning;
        state.msgRes = data.msgRes
        // console.log(state.msgRes);
      });
    });
    const refState = toRefs(state);
    return {
      ...refState,
      handleCloseWarnning,
    };
  },
};
</script>
<style scoped>
.frank_warnning {
  height: 370px;
  width: 300px;
  background: #fff;
}

.frank_warnning .warnning_header {
  height: 44px;
  line-height: 44px;
}

.frank_warnning span {
  margin-left: 5px;
}

.frank_warnning .warnning_body {
  margin-left: 10px;
  height: calc(100% - 44px);
}

.msg_span {
  color: red;
}

:deep(.el-descriptions__header) {
  margin-bottom: 0;
}

.textColor {
  color: blue;
}

.warnning_header .el-icon {
  cursor: pointer;
}
.warnning_header .el-icon:hover {
  color: #758bfd;
}
</style>